<template>
  <ConfigProvider>
    <RadioGroup v-model:value="value" @change="onChange">
      <Space direction="vertical">
        <Radio :value="1" :class="Styles.radioWrap">每一天</Radio>
        <Space align="center">
          <Radio :value="2" :class="Styles.radioWrap" />
          <span>从</span>
          <InputNumber
            v-model:value="s1"
            :min="0"
            :max="7"
            @focus="value = 2"
            @change="onChange"
          />
          <span>开始 每隔</span>
          <Select
            v-model:value="s2"
            :class="Styles.selectWrap"
            :options="genWeeks()"
            @focus="value = 2"
            @change="onChange"
          />
          <span>周执行</span>
        </Space>
        <Space align="center">
          <Radio :value="3" :class="Styles.radioWrap" />
          <span> 从</span>
          <InputNumber
            v-model:value="s3"
            :min="0"
            :max="31"
            @focus="value = 3"
            @change="onChange"
          />
          <span>天开始 每隔</span>
          <Select
            v-model:value="s4"
            :class="Styles.selectWrap"
            :options="genOptions(31, 1)"
            @focus="value = 3"
            @change="onChange"
          />
          <span>天执行</span>
        </Space>
        <Space align="center">
          <Radio :value="4" :class="Styles.radioWrap" />
          <span>具体星期几（可多选）</span>
          <Select
            v-model:value="s5"
            :class="Styles.selectWrap"
            :options="weeks"
            @focus="value = 4"
            mode="multiple"
            :max-tag-count="2"
            @change="onChange"
          />
        </Space>
        <Space align="center">
          <Radio :value="5" :class="Styles.radioWrap" />
          <span>天数（可多选）</span>
          <Select
            v-model:value="s6"
            :class="Styles.selectWrap"
            :options="genOptions(31, 1)"
            @focus="value = 5"
            :max-tag-count="3"
            mode="multiple"
            @change="onChange"
          />
        </Space>
        <Radio :value="6" :class="Styles.radioWrap">在这个月最后一天</Radio>
        <Radio :value="7" :class="Styles.radioWrap"
          >在这个月最后一个工作日</Radio
        >
        <Space align="center">
          <Radio :value="8" :class="Styles.radioWrap" />
          <span>在这个月最后一个</span>
          <Select
            v-model:value="s7"
            :class="Styles.selectWrap"
            :options="genWeeks()"
            @change="onChange"
            @focus="value = 8"
          />
        </Space>
        <Radio :value="9" :class="Styles.radioWrap">
          <Space align="center">
            <InputNumber
              v-model:value="s8"
              :min="0"
              :max="31"
              @focus="value = 9"
              @change="onChange"
            />
            <span>本月底前</span>
          </Space>
        </Radio>
        <Radio :value="10" :class="Styles.radioWrap">
          <Space align="center">
            <span>最近的工作日（周一至周五）至本月</span>
            <InputNumber
              v-model:value="s9"
              :min="0"
              :max="31"
              @focus="value = 10"
              @change="onChange"
            />
            <span>日</span>
          </Space>
        </Radio>
        <Space align="center">
          <Radio :value="11" :class="Styles.radioWrap" />
          <span>在这个月的第</span>
          <InputNumber
            v-model:value="s10"
            :min="1"
            :max="5"
            @focus="value = 11"
            @change="onChange"
          />
          <Select
            v-model:value="s11"
            :class="Styles.selectWrap"
            :options="genWeeks()"
            @focus="value = 11"
            @change="onChange"
          />
        </Space>
      </Space>
    </RadioGroup>
  </ConfigProvider>
</template>

<script setup lang="tsx">
import { CSSProperties, computed, inject, ref } from 'vue';
import {
  ConfigProvider,
  InputNumber,
  Radio,
  RadioGroup,
  Select,
  Space,
} from 'ant-design-vue';
import { emitKey } from './constant';
import Styles from './index.module.scss';
import { genOptions, genWeeks } from './utils';

const weeks = [
  {
    label: '星期天',
    value: 'SUN',
  },
  {
    label: '星期一',
    value: 'MON',
  },
  {
    label: '星期二',
    value: 'TUE',
  },
  {
    label: '星期三',
    value: 'WED',
  },
  {
    label: '星期四',
    value: 'THU',
  },
  {
    label: '星期五',
    value: 'FRI',
  },
  {
    label: '星期六',
    value: 'SAT',
  },
];

const emit = inject(emitKey);

const value = ref(1);

const s1 = ref(1);
const s2 = ref(1);
const s3 = ref(1);
const s4 = ref(1);
const s5 = ref([]);
const s6 = ref([]);
const s7 = ref(1);
const s8 = ref(1);
const s9 = ref(1);
const s10 = ref(1);
const s11 = ref(1);

const data = computed<string>(() => {
  switch (value.value) {
    case 1:
      return '*';
    case 2:
      return `${s2.value}/${s1.value}`;
    case 3:
      return `${s4.value}/${s3.value}`;
    case 4:
      return s5.value.length ? s5.value.join() : '?';
    case 5:
      return s6.value.length ? s6.value.join() : '*';
    case 6:
      return 'L';
    case 7:
      return 'LW';
    case 8:
      return `${s7.value}L`;
    case 9:
      return `L-${s8.value}`;
    case 10:
      return `${s9.value}W`;
    case 11:
      return `${s11.value}#${s10.value}`;
    default:
      return '';
  }
});

const onChange = () => {
  switch (value.value) {
    case 1:
    case 3:
    case 5:
    case 6:
    case 7:
    case 8:
    case 9:
    case 10:
      emit?.({
        type: 'D',
        value: data.value,
      });
      emit?.({
        type: 'W',
        value: '?',
      });
      break;
    case 2:
    case 4:
    case 11:
      emit?.({
        type: 'D',
        value: '?',
      });
      emit?.({
        type: 'W',
        value: data.value,
      });
      break;
    default:
      break;
  }
};
</script>
